<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>


    <link rel="stylesheet" type="text/css" th:href="@{/css/layui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/login.css}">
    <script th:src="@{/js/vue.min.js}"></script>
    <script th:src="@{/js/axios.min.js}"></script>
    <script th:src="@{/js/layui.js}"></script>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

</head>
<body>

<div class="box">
    <div id="login" class="layui-row">

        <div class="layui-col-md6 layui-col-xs6 imageDiv">
            <div id="image">
                <img id="userImage" class="layui-nav-img" :src="prefix+imagePath">
            </div>

        </div>
        <div class="layui-col-md6 layui-col-xs6 loginDiv">
            <div class="head">
                <h1>登录</h1>
            </div>
            <div class="form-info">
                <form th:action="@{/login}" method="post">
                    <div class="login-field-box layui-row">
                        <div class="layui-col-md1 layui-col-xs1">
                            <img id="user-head-img" class="i" th:src="@{/images/user.png}">
                        </div>
                        <div class="layui-col-md11 layui-col-xs11">
                            <input id="user" class="login-field" name="username" type="text" required="required"
                                   autocomplete="off" placeholder="账号" v-model="account" v-on:blur="getImage"
                                   v-on:keyup="getImage">
                        </div>
                        <div id="if">
                            {{message}}
                        </div>

                    </div>

                    <div id="message-box" class="login-field-box layui-row">
                        <div class="layui-col-md1 layui-col-xs1">
                            <img class="i" th:src="@{/images/lock.png}">
                        </div>
                        <div class="layui-col-md11 layui-col-xs11">
                            <input  class="login-field" type="password" required="required"
                                   autocomplete="off" placeholder="密码" v-model="pass">
                            <input id="pass" name="password" type="password" hidden="hidden">
                        </div>
                    </div>

                    <div class="submit-box">
                        <button v-on:click="submit($event)" id="submit"
                                class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal" type="submit">登录
                        </button>
                    </div>

                </form>
            </div>

            <div class="register-box">
                <p id="register">没有账号？<a th:href="@{/register}">立即注册</a></p>
            </div>
        </div>
    </div>
</div>


</body>
<script type="text/javascript" th:inline="javascript">

    let vue = new Vue({
        el: '#login',
        data: {
            account: '',
            pass: '',
            message: [[${message}]],
            prefix: 'http://localhost:8080/pictures/',
            imagePath: 'blank.svg'
        },
        methods: {
            //对用户名和密码进行简单的校验
            submit: function (event) {
                let usernamePattern = /^\d{12}$/;
                let userCheck = usernamePattern.test(this.account);

                console.log(this.username);
                console.log(userCheck)
                if (!userCheck) {
                    var str = "输入正确的账号，格式为12位数字!"
                    layer.alert(str, {
                        time: 3000
                    })
                    return;
                    event.preventDefault();
                    return;
                }

                let passwordPattern = /^[a-zA-Z0-9]{8,12}$/;
                let passCheck = passwordPattern.test(this.pass);

                if (!passCheck) {
                    var str = "输入的密码格式不正确，格式为{数字+字母}的8到12位数"
                    layer.alert(str, {
                        time: 3000
                    })
                    event.preventDefault();
                    return;
                }


                document.getElementById("pass").value = md5(this.pass);

            },

            getImage: function () {

                let usernamePattern = /^\d{12}$/;
                let userCheck = usernamePattern.test(this.account);

                if (!userCheck) {
                    this.imagePath = 'blank.svg';
                    return;
                }

                axios({
                    url: 'http://localhost:8080/getImage',
                    method: 'get',
                    params: {
                        username: this.account
                    }
                }).then((response) => {


                    if (response.data != '') {
                        this.imagePath = response.data;
                    } else {
                        this.imagePath = 'blank.svg';
                    }
                });


            }
        },
        mounted: function () {

            if (this.message == '') {
                document.getElementById("message-box").style.marginTop = '40px';
            } else {
                document.getElementById("message-box").style.marginTop = '19px';
            }
        }
    })


</script>
</html>